<template>
  <div class="dashboard-container">
    <!-- 统计数据区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-title">cpu核心数</div>
            <div class="stat-value">{{ stats.cpu_count }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-title">启用进程数</div>
            <div class="stat-value">{{ stats.start_server }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-title">今日请求量</div>
            <div class="stat-value">{{ stats.request_pv_day }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-title">总请求量</div>
            <div class="stat-value">{{ stats.request_pv_total }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和系统信息区域 -->
    <el-row :gutter="20" class="content-row">
      <!-- 图表区域 -->
      <el-col :span="16">
        <el-card class="chart-card">
          <div class="chart-title">
            最近{{ daystr }}请求量
            <div class="date-buttons">
              <el-radio-group v-model="selectedDays" @change="updateChartData">
                <el-radio :label="7">7天</el-radio>
                <el-radio :label="15">15天</el-radio>
                <el-radio :label="30">30天</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div id="chart" ref="chart" style="width: 100%; height: 400px;" />
        </el-card>
      </el-col>

      <!-- 系统信息区域 -->
      <el-col :span="8">
        <el-card class="info-card">
          <div class="info-title">
            系统信息
            <el-button type="primary" icon="el-icon-refresh" style="float: right;" @click="refreshSystemInfo">刷新</el-button>
          </div>
          <el-table :data="systemInfo" empty-text="加载中..." border style="width: 100%;">
            <el-table-column prop="key" label="项目" width="180" />
            <el-table-column prop="value" label="值" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import { getDashboardPvList, getDashboardData, getSystemInfo } from '@/api/system'

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        cpu_count: 0,
        request_pv_day: 0,
        request_pv_total: 0,
        start_server: 0
      },
      daystr: '',
      selectedDays: 7, // 默认选中 7 天
      chartData: {
        days: [],
        values: []
      },
      systemInfo: []
    }
  },
  computed: {
    ...mapGetters(['username', 'adminid'])
  },
  mounted() {
    this.getDashboardData()
    this.updateChartData(this.selectedDays)
    this.refreshSystemInfo()
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.days,
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartData.values,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#4a90e2'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(74, 144, 226, 0.5)' },
                { offset: 1, color: 'rgba(74, 144, 226, 0)' }
              ])
            },
            itemStyle: {
              color: '#4a90e2'
            }
          }
        ]
      }
      chart.setOption(option)
    },
    updateChartData(days) {
      getDashboardPvList(days).then(succ => {
        this.chartData = {
          days: succ.data.days,
          values: succ.data.values
        }
        this.renderChart()
        this.daystr = days + '天'
      })
    },
    refreshSystemInfo() {
      this.systemInfo = []
      getSystemInfo().then(succ => {
        console.log(succ)
        this.systemInfo = succ.data
      })
    },
    getDashboardData() {
      getDashboardData().then(succ => {
        this.stats = succ.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  .stat-title {
    font-size: 16px;
    color: #666;
  }
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
  }
}

.content-row {
  margin-top: 20px;
}

.chart-card {
  padding: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-buttons {
  display: flex;
  gap: 10px;
}

.info-card {
  padding: 20px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
